<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>国内省份数据</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="/js/china1.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- layui的水平导航 -->
    <div class="layui-header">
        <div class="layui-logo"><strong>高校健康上报系统</strong></div>
    </div>

    <!-- layui的垂直导航 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item ">
                    <a href="/zhuye"><i class="layui-icon layui-icon-home"></i>  用户主页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/userinfo"><i class="layui-icon layui-icon-survey"></i>  个人信息上报</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/record"><i class="layui-icon layui-icon-log"></i>  上报记录</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/china"><i class="layui-icon layui-icon-list"></i>  国内省份数据</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/global1"><i class="layui-icon layui-icon-list"></i>  全球国家数据</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/regional"><i class="layui-icon layui-icon-list"></i>  全球地区数据</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/logout"><i class="layui-icon layui-icon-logout"></i>  退出系统</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">

        <div>
            <script th:inline="javascript">
                function getArray() {
                    var data=[];
                    var lists = [[${rsList}]];
                    for (var i = 0;i<lists.length;i++){
                        data.push({name:lists[i].state,value:lists[i].latestTotalCases})
                    }
                    //console.log(data)
                    return data;
                }

            </script>

            <div id="container" style="height: 560px;width:1200px;background:white;margin:20px 0 0;"></div>

            <script type="text/javascript">

                var dataMap = getArray();
                for (var i = 0;i<dataMap.length;i++){
                    if(dataMap[i].value>400) dataMap[i].selected = true;
                }
                // 绘制图表，准备数据
                var option = {
                    title: {
                        text: 'Distribution map of china COVID-19 diagnosis',
                        left: 'center'
                    },
                    tooltip: {
                        formatter: function (params) {
                            var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">'+'疫情总数:'+params.value+'</p>'
                            return info;
                        },
                        backgroundColor: "#ff7f50",//提示标签背景颜色
                        textStyle: { color: "#fff" } //提示标签字体颜色
                    },
                    series: [
                        {
                            name: '中国',
                            type: 'map',
                            mapType: 'china',
                            selectedMode: 'multiple',
                            label: {
                                normal: {
                                    show: true,//显示省份标签
                                    // textStyle:{color:"#c71585"}//省份标签字体颜色
                                },
                                emphasis: {
                                    show: true,//对应的鼠标悬浮效果
                                    // textStyle:{color:"#800080"}
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: .5,//区域边框宽度
                                    // borderColor: '#009fe8',//区域边框颜色
                                    // areaColor:"#ffefd5",//区域颜色
                                },
                                emphasis: {
                                    borderWidth: .5,
                                    borderColor: '#4b0082',
                                    areaColor: "#ffdead",
                                }
                            },
                            data: dataMap
                        }
                    ]
                };
                //初始化echarts实例
                var myChart = echarts.init(document.getElementById('container'));
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
            </script>
        </div>

        <div style="padding: 15px;">
            <div class="demoTable">
                查询省份：
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" id="btn" data-type="reload">查询</button>
            </div>
            <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
        </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;

    });

    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#LAY_table_user'
            ,url:'/data/china'
            ,cellMinWidth: 80
            ,toolbar:true
            ,title:'用户数据表'
            ,totalRow:true
            ,cols: [
                [
                    {field:'state', title: '省份'}
                    ,{field:'country', title: '国家'}
                    ,{field:'latestTotalCases', title: '累计确诊人数', sort: true, align: 'center'}
                    ,{field:'diffFromPrevDay', title: '相较前一天新增确诊人数', sort: true, align: 'center'}
                ]
            ]
            ,id: 'testReload'
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                console.log("key:" + demoReload.val());
                table.reload('testReload', {
                        url: '/data/province'
                        ,where: {
                            state: demoReload.val()
                        }
                    }
                );
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>